<template>
  <div class="app-card">
    <navbar class="nav" ref="nav" :menuItems="menu" @menuChange="handleMenuChange('topMenu',$event)"  @changePwd="showChangePwd"></navbar>
    <c-scrollbar class="card-wrap-scroll">
      <div class="card-wrap">
        <c-card
          v-for="item in appList"
          :key="item.appId"
          class="box-card"
        >
          <span class="app-name" @click="toApp(item.url, item.appNo)">{{item.appName}}</span>
          <c-dropdown
            class="operate" v-if="item.openWay"
          >
            <span class="el-dropdown-link ">
                <svg-icon icon-class="info"></svg-icon>
            </span>
            <c-dropdown-menu slot="dropdown">
              <c-dropdown-item  v-if="item.own" @click.native = "closeApp(item.infoId)">关闭</c-dropdown-item>
              <c-dropdown-item  v-else  @click.native = "openApp(item.appId)">开通</c-dropdown-item>
            </c-dropdown-menu>
          </c-dropdown>
          <img class="app-icon" :src="item.appPicturePath" @error.once="appIconError"/>
          <!-- 遮罩层 -->
          <div v-if="item.openWay && !item.own" class="card-mask"></div>
        </c-card>
      </div>
      <Footer class="footer" ref="footer"></Footer>
      <ChangePwd ref="changePwd"></ChangePwd>
    </c-scrollbar>
  </div>

</template>

<script>
const defaultAppIcon = require('../assets/imgs/default-app-icon-0.png')
import Navbar from '../layout/Navbar'
import request from '@/utils/request'
import Footer from '@/layout/Footer'
import ChangePwd from '@/layout/ChangePwd'
export default {
  name: 'appCard',
  components: {
    Navbar,
    Footer,
    ChangePwd
  },
  data() {
    return {
      url: '/v1/cm/appconfig/getAppList',
      applyUrl:'/v1/cm/userappapply/add',
      closeAppUrl:'/v1/cm/userappinfo/close',
      zdUrl: '/v1/cm/common/getZdTicket',
      appId: '',
      appList: []
    }
  },
  computed: {
    menu() {
      return this.$store.getters.menu
    }
  },
  methods: {
    appIconError(e){
      if(e.target){
        e.target.src = defaultAppIcon;
      }
    },
    openApp(appId) {
      const url = this.applyUrl
      const params = {}
      params['appId'] = appId
      request({
        url,
        method: 'post',
        params
      }).then(({ data }) => {
        this.$alert('已提交申请,等待审核', '提示', {
          confirmButtonText: '确定',
        });
      }).catch((error) =>{
        // this.$alert(error)
      })
    },
    closeApp(infoId) {
      this.$confirm('确认要关闭吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return new Promise((resolve) => {
          const url = this.closeAppUrl
          const params = {}
          params['infoId'] = infoId
          request({
            url,
            method: 'post',
            params
          }).then(({ data }) => {
              this.getAppList();
              this.$message({
              type: 'success',
              message: '关闭成功!'
            });
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消关闭'
        });
      });
    },
    toApp(path, appNo) {
      if(appNo === 'zd') {
        const url = this.zdUrl
        request({
          url,
          method: 'post',
        }).then(({ data }) => {
          window.open(`${path}?ticketId=${data}`)
        }).catch((error) =>{
          console.log(error)
        })
      } else if (appNo === 'svn') {
        this.$router.push({path: 'kc/configreposmyrepos'})
      }else {
        window.open(path)
      }
    },
    getAppList () {
      return new Promise((resolve) => {
        const url = this.url
        request({
          url,
          method: 'get',
        }).then(({ data }) => {
          this.appList = data
          // resolve(data)
        })
      })
    },
    getMenuByID(menus, id) {
      // console.log("getMenuByID", menus, id)
      if (!id) {
        return {}
      }
      if (menus && Object.prototype.toString.call(menus) === "[object Array]") {
        for (let i = 0, len = menus.length; i < len; i++) {
          if (menus[i].id === id) {
            return menus[i]
          }
        }
      }
    },
    buildMenuLevel(menu) {
      if (!menu) {
        return
      }
      const pids = menu.pids
      const len = pids && Object.prototype.toString.call(pids) === "[object Array]" && pids.length || 0
      const list = new Array(len + 1)
      if (len) {
        for (let i = 0; i < len; i++) {
          if (i === 0) {
            list[i] = this.sidebarItem // getMenuByID(this.menu, pids[i])
          } else if (list[i - 1] && list[i - 1].children) {
            list[i] = this.getMenuByID(list[i - 1].children, pids[i])
          }
        }
      }
      list[len] = menu
      return list
    },
    showChangePwd() {
      this.$refs.changePwd.show()
    },
    handleMenuChange(type, menu) {
      // console.log('handleMenuChange:::', type, menu)
      const url = menu.url || menu.path
      const id = menu.id
      if (this.rid === id) {
        return
      } else {
        this.rid = id
      }
      if (id !== 0) {
        this.hideMenu = false
      } else {
        this.hideMenu = true
      }
      if (type === 'topMenu') {
        this.sidebarItem = menu
      } else if (type === 'tag') {
        this.sidebarItem = this.getMenuByID(this.menu, menu.pids && menu.pids[0] || menu.id)
      }
      // if (type === 'topMenu' || url !== this.$route.path) {
      this.menuLevel = this.buildMenuLevel(menu)
      // }
      if (url) {
        this.showEmpty = false
        this.$router.push({ path: url })
      } else {
        this.showEmpty = true
      }
    }
  },
  mounted() {
    this.getAppList()
  }
}
</script>

<style lang="scss">
  .app-card{
    height:100%;
    overflow: hidden;
    padding-bottom:40px;
    .card-wrap-scroll{
      overflow: hidden;height:100%;
      .card-wrap{
        display: flex;
        justify-content:flex-start;
        flex-wrap: wrap;
        .box-card{
          width:20%;
          height: 220px;
          box-sizing:border-box;
          margin:40px 0 40px 4%;
          position: relative;
          text-align: center;
          .card-mask{
            position: absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            background: #9c9d9f;
            opacity: 0.1;
            z-index:9;
          }
          .app-icon {
            position: absolute;
            top: 50%;
            transform: translate(-50%,-40%);
            max-width: 50%;
            max-height: 90%;
          }
          .app-name{
            width:30%;
            text-align: center;
            height:40px;
            line-height:40px;
            position: absolute;
            top:14px;
            left:35%;
            letter-spacing:2px;
            z-index:8;
            &:hover{
              color:#55aafe;
              cursor:pointer;
            }
          }
          .operate{
            font-size:32px;
            position: absolute;
            top:16px;
            right:20px;
            cursor:pointer;
            color:#888;
            z-index: 10;
          }
        }
      }
    }
    .footer{
      position: fixed;
      bottom:0;
    }
  }

</style>
